<template>
    <div class="container">
      <mzh-head></mzh-head>



        <div class="account">

            <div class="account1">
                <div class="account_1" @click="setCateId(0, $t('shop.info.allgoods'))">
                    <div><span :class="{num:$route.query.cid==0}">{{$t('shop.info.allgoods')}}</span></div>
                    <div>
                        <span class="num" v-if="$route.query.cid==0"><van-icon name="success" /></span>
                        <span v-else><van-icon name="arrow" /></span>
                    </div>
                </div>

            </div>
            <div class="account1"  v-for="(item, index) in categorieslang" :key="index">
                <div class="account_1" @click="setCateId(item.id, item.name)">
                    <div><span :class="{num:item.id==$route.query.cid}">{{item.name}}</span></div>
                    <div>
                        <span class="num" v-if="item.id==$route.query.cid"><van-icon name="success" /></span>
                        <span v-else><van-icon name="arrow" /></span>
                    </div>
                </div>

            </div>
        </div>



    </div>
</template>

<script>

  //  import {getCategory} from 'network/category'
  import MzhHead from '../../src/components/head.vue'
    import data from 'network/cate_data.js'
    import i18n from '@/i18n';

    export default {
        name: 'CateSet',
        components:{
        MzhHead
        },
        data() {
            return {
                categories:[],
            };
        },
        computed: {

            categorieslang(){

                return this.categories.map(item=>{

                    item.name = JSON.parse(item.name)[i18n.locale] ?? JSON.parse(item.name)['zh'];
                    return item;
                })


            }

        },
        mounted() {

            this.getCategory();
        },
        methods: {
            getCategory(){
          /*      getCategory().then(res=>{
                    if(res.status!='undefined' && res.status=='200'){
                        this.categories = res.data.categories;
                        console.log(this.categories);
                    }

                })*/
                /*getCategory().then(res=>{
                    if(res.status!='undefined' && res.status=='200'){
                   //     console.log(JSON.stringify(res.data.categories));
                        this.categories = res.data.categories;
                        console.log(this.categories);
                    }

                })*/
                this.categories = data;

             //   console.log(data);

            },

            onClickRight() {
                console.log("router");
                this.$router.push('/category')
            },
            setCateId(cid, name){
                console.log(cid, name)
                this.$router.push({path:'/category', query:{cid, name}})
            }
        }

    }
</script>

<style scoped>
    .bnav {
        margin: auto;
        max-width: 500px;
        padding: 0px 25px;
        z-index: 10;
        /* background-color: #DDFDFA; */
        background: #000;
        height:66px;
    }
    .recordlist {
        margin:3px 20px 3px 20px;
    }
    .pool{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .pool_img{
        width: 200px;
    }
    .pool_txt{
        display: flex;
        flex-direction: column;
        margin-right: 80px;
        font-size: 13px;
    }
    .p1{
        margin-bottom: 3px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .p1_1{
        width: 100px;

    }
    .p1_2{
        font-size: 20px;
        color: #FFC000;
        margin-right: 30px;
    }
    .account{
        padding: 50px 30px;
    }
    .acc{
        font-size: 20px;
        color: #fff;
        font-weight: bold;

    }
    .num{
        color: #FFC000;
        font-size: 16px;
    }
    .account1{
        padding: 10px 0;
        border-bottom: #201f1f 1px solid;
    }
    .account_1{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

    }
    .card{
        display: flex;
        justify-content: space-between;

    }
    .card_img{
        width: 160px;
        height: 200px;
        border-radius: 10px;
    }
    .gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);

        filter: grayscale(100%);

        filter: gray;
    }
    .xq1{
        padding: 5px 0px;
        background-color: #201f1f;
        border-radius: 5px;
        margin-bottom: 1px;
        margin:5px;

    }
    .van-hairline--bottom::after{
        border-bottom-width:0;
    }
    .container {
        background-color: #000;
        /* padding: 0 30px; */

        padding-bottom: 100px;
        min-height: 1500px;
        letter-spacing: 0.00938em;
        font-size: 15px;
        color:#B3B3B3;


    }

    .van-nav-bar {
        background-color: #000;
    }

    .user1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user_img {
        width: 200px;
        margin-top: -20px;
    }

    .user2 {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
    }

    .user22 {
        margin-top: 30px;
    }

    .u {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex: 0.5;

    }

    .uu {
        border-right: #B3B3B3;
        border-right-style: dotted;

    }

    .u1 {
        color: #FFC000;
        font-size: 23px;

    }

    .addr {
        font-size: 15px;
        text-align: center;
        padding: 10px 0;
        margin: 10px 0;
        background-color: #201f1f;
        border-radius: 10px;
    }

</style>
